<template>
  <el-card class="departments">
    <el-tabs v-model="activeName">
      <el-tab-pane label="组织架构" name="title">
        <div class="company">
          <TreeItem :item="topInfo" />
        </div>
        <el-tree :data="list">
          <template v-slot="{ data }">
            <TreeItem :item="data" @getDepartment="getDepartment" />
          </template>
        </el-tree>
      </el-tab-pane>
    </el-tabs>
    <!-- 弹框组件 -->
    <DialogItem :init-list="initList" @getDepartment="getDepartment" />
  </el-card>
</template>

<script>
import TreeItem from './components/tree-item.vue'
import { companyDepartment } from '@/api/departments.js'
import DialogItem from './components/dialog-item.vue'
export default {
  name: 'Departments',
  components: {
    TreeItem,
    DialogItem
  },
  data() {
    return {
      activeName: 'title',
      topInfo: {
        name: '',
        manager: '负责人',
        isTop: true,
        id: ''
      },
      list: [],
      initList: []
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    // 获取组织架构
    async getDepartment() {
      const res = await companyDepartment()
      this.topInfo.name = res.data.companyName
      this.initList = res.data.depts
      this.list = this.changeDepartment(res.data.depts)
    },
    // 修改数据结构
    changeDepartment(arr, str = '') {
      return arr.filter((item) => {
        if (item.pid === str) {
          item.children = this.changeDepartment(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  margin: 20px;
  ::v-deep .el-tabs__header {
    padding: 20px 5px 0 30px;
  }
  ::v-deep .el-tabs__content {
    padding: 30px 120px 50px 120px;
    .company {
      margin-bottom: 10px;
      padding: 10px 0;
      border-bottom: 1px solid #cfcfcf;
    }
    .el-tree-node {
      padding: 4px 0;
    }
  }
}
</style>
